<template>
  <div class="groupchatmessage-container">
    <chatviewheader :name='"聊天信息"' :action='"no"'></chatviewheader>
    <div class="mui-scroll-wrapper mui-content content">
      <div class="mui-scroll">
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner mine-header">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">群成员</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner mine-header">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <span class="mui-navigate-right">置顶聊天</span>
                    <div class="mui-switch mui-switch-mini" data-action="totop">
                      <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-navigate-right">消息免打扰</span>
                    <div class="mui-switch mui-switch-mini" data-action="notdisturb">
                      <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-navigate-right">屏蔽</span>
                    <div class="mui-switch mui-switch-mini" data-action="shield">
                      <div class="mui-switch-handle"></div>
                    </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner mine-header">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">清空聊天记录</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner mine-header">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">投诉</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import chatviewheader from '../chatview/ChatViewHeader'
  import {mapGetters} from 'vuex'
  export default {
    created() {
      console.log(this.getCurrentChatUsername)
    },
    computed: {
      ...mapGetters(['getCurrentChatUsername'])
    },
    mounted() {
      this.init()
    },
    components: {
      chatviewheader
    },
     methods: {
       init() {
         var self = this
         self.$immui.init()
         self.$immui('.mui-switch')['switch']()
         self.$immui('.chatmessage-container').on('toggle', '.mui-switch', function(event) {
          if (event.detail.isActive) {
            console.log('你启动了开关')
            let action = this.getAttribute('data-action')
            switch (action) {
              case 'totop':
                console.log(action)
                break
              case 'notdisturb':
                console.log(action)
                break
              case 'shield':
                console.log(action)
                break
              default:
                console.log('请重新点击')
                break
            }
          } else {
            console.log('你关闭了开关')
          }
        })
        //  self.$immui('.mui-switch').switch().toggle()
       },
       goback() {
         this.$router.go(-1)
       }
     }
  }
</script>

<style lang='scss' scoped>
.groupchatmessage-container{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f4f4f4;
  z-index: 12;
}
.content.mui-scroll-wrapper{
  top: 48px;
}
.mui-card{
    margin: 0 0 10px 0;
  }
.mui-card-content-inner{
    padding: 15px 15px 15px 4px;
}
li.mui-table-view-cell{
  height: 43px;
}
</style>
